$(function(){
    console.log('初始化页面，将后端数据渲染到前端页面中');
    axios.get('http://localhost:8080/goods').then(res=>{
        let data=res.data;
        reader(data.data);
    })
})
function btnAdd(){
    console.log('新增');
    location.href='./edit.html'
}
function btnFind(){
    console.log('查找');    
     /*
        1.前端拿到关键字，向后端api发请求
        2.后端api拿到关键字，在数据库中查找符合条件的记录，最后返回记录列表
        3.前端拿到api的响应，移除表格的行数据，重新使用api返回的列表渲染数据

    */
    let keyword=$('[name=keyword]').val();
    axios.get(`http://localhost:8080/goods?keyword=${keyword}`).then(res=>{
        let data=res.data;
        console.log(data);
        if(data.code===1000){
            let tr=$('[class^=tr]');
            console.log(tr);
            tr.remove();
            reader(data.data);
        }
    })
}
function btnEdit(){
    console.log('编辑');
    location.href='./edit.html'
}
function btnDel(id){
    console.log('删除');
    if(confirm('确认要删除这一行？')){
    axios.delete(`http://localhost:8080/goods/${id}`).then(res=>{

       let tr=$('.tr'+id);
       console.log(tr);
       let data=res.data;
       if(data.code===1000){
        tr.remove();
       }else if(data.code===4000){
        confirm('未找到该商品信息');
       }
    })
}
}

function reader(arr){
    arr.forEach(item=>{
        let tb=$('#tb');
        let html =`
        <tr class="tr${item.id}">
            <td>${item.id}</td>
            <td>${item.filename}</td>
            <td>${item.year}</td>
            <td><input type="button" value="编辑" onclick="btnEdit(${item.id})">
                <input type="button" value="删除" onclick="btnDel(${item.id})">
            </td>
        </tr>
        
        `
        tb.append(html);
    })
}